<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>知乎 - 有问题，上知乎</title>
       <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.css">
        <style type="text/css">
            body,html {
                padding: 0px;
                margin: 0px;
                height: 100%;
                font-size: 15px;
            }
            a {
                text-decoration: none;
                color: inherit;
            }
            a:hover {
                text-decoration: none;
                color: inherit;
            }
            button {
                border: none;
                background-color: transparent;
            }
            /* 背景图片部分 */
            .wrapper {
                width: 100%;
                height: 100%;
                background-image: url("https://static.zhihu.com/heifetz/assets/sign_bg.db29b0fb.png");
                background-repeat: no-repeat;
                background-color: #b8e5f8;
                background-size: cover ;
                text-align: center;
            }
                /* 顶部logo部分 */
            .wrapper .logo {
                width: 128px;
                height: 81px;
                margin-bottom: 24px;
                margin-top: 35px;
            }
                /* 表单样式 */
            .wrapper .login {
                width: 400px;
                padding: 0 24px 12px;
                height: 375px;
                margin: 0 auto;
                 position: relative;
                box-sizing: border-box;
                background-color: #ffffff;
                border-radius: 3px;
            }
                            /* 二维码部分样式 */
            .wrapper .login .QRcode {
                position: absolute;
                right: 0;
                top: 0;
                height: 52px;
                width: 52px;
                background-image: url("");
                background-size: 100%;
            }
            .wrapper .login .QRcode .mask {
                height: 0;
                width: 0;
                border-left: 26px solid #ffffff;
                border-top: 26px solid transparent;
                border-right: 26px solid transparent;
                border-bottom: 26px solid #ffffff;
            }
                             /* 顶部导航条样式 */
            .wrapper .login .tab {
                width: 100%;
                height: 60px;
                text-align: left;
            }
            .wrapper .login .tab .pwd {
                color: #1a1a1a;
                font-weight: 600;
                line-height: 60px;
                border-bottom: 3px solid #000000;
                box-sizing: border-box;
                height: 60px;
                width: 80px;
                font-size: 16px;
                float: left;
                margin-right: 24px;
            }
            .wrapper .login .tab .use-pwd {
                color: #444;
                line-height: 60px;
                box-sizing: border-box;
                height: 60px;
                width: 80px;
                font-size: 16px;
                float: left;
            }
                            /* 手机号输入样式 */
            .wrapper .login  .account {
                margin-top: 24px;
                height: 50px;
                box-sizing: border-box;
                border-bottom: 1px solid #ebebeb;
                text-align: left;
                width: 100%;
                cursor: pointer;
            }
            .wrapper .login  .account span {
                color: #ebebeb;
                display: inline-block;
                margin: 0 12px;
            }
            .wrapper .login  .account input {
                height: 48px;
                line-height: 24px;
                border: none;
                color:#76839b;
                font-size: 14px;
                background-color: transparent;
                outline: none;
                display: inline-block;
            }
            .wrapper .login .account .countries {
                display: inline-block;
                text-align: left;
            }
            .wrapper .login .account .countries .plus {
                font-size: 14px;
                color: #8590a6;
                text-align: left;
            }
            .wrapper .login .account .choices {
                display: inline-block;
                color: #8590a6 ;
                position: relative;
                height: 30px;
                margin-right: 6px;;
            }
                            /* 验证码部分样式 */
            .wrapper .login .check-number {
                margin-top: 12px;
                height: 48px;
                box-sizing: border-box;
                border-bottom: 1px solid #ededed;
                text-align: left;
                font-size:14px;
            }
            .wrapper .login .check-number input {
                border: none;
                float: left;
                height: 48px;
                background-color: transparent;
                color: #8590a6;
                outline: none;
            }
            .wrapper .login .check-number button {
                text-align: right;
                background-color:transparent;
                float: right;
                line-height: 48px;
                color: #175199;
            }
            .wrapper .login .check-number button:hover {
                color:#8590a6;
            }
            .wrapper .login  .check-option {
                margin-top: 12px;
                height: 20px;
                text-align: right;
            }
            .wrapper .login  .check-option button {
                line-height: 20px;
                color: #8590a6;
                font-size: 14px;
            }
                          /* 提交按钮样式 */
            .wrapper .login .sub {
                margin-top: 30px;
                background-color: #0084ff;
                border-color: #0084ff;
                color: #ffffff;
                height: 36px;
                width: 100%;
                font-size: 16px;
                padding: 0 16px;
                line-height: 32px;
                cursor: pointer;
                border-radius: 3px;
            }
            .wrapper .login .sub:hover {
                background-color: #0077e6;
                border-color: #0077e6;
            }
                          /* 提示部分样式 */
            .wrapper .login .tip {
                margin-top: 36px;
                color: grey;
                font-size: 13px;
                text-align: left;
            }
                /* 社会登陆样式 */
            .wrapper .socialLogin {
                width: 400px;
                height: 60px;
                margin: 0 auto 10px;
                padding: 0 24px;
                border-radius: 0 0 4px 4px;
                background-color: #f6f6f6;
                color:#8590a6;
                line-height: 60px;
                box-sizing: border-box;
            }
            .wrapper .socialLogin .space {
                margin-left: 20px;
                cursor: pointer;
            }
            .wrapper .socialLogin span {
                line-height: 60px;
                color: #8590a6;
                float: left;
            }
                /* 其他部分的样式 */
            .wrapper .other {
                width: 400px;
                height: 68px;
                margin:14px auto 0;
                padding: 0 24px;
                background-color: #ffffff;
                color: #0084FF;
                text-align: center;
                box-sizing: border-box;
                border-radius: 4px;
            }
            .wrapper .other span {
                line-height: 68px;
            }
            .wrapper .other .first {
                line-height: 68px;
                float: left;
                margin-left: 10px;
            }
            .wrapper .other .second {
                line-height: 69px;
                float: right;
                margin-right: 10px;
            }
                /* foot部分样式 */
            .wrapper .foot {
                font-size: 12px;
                line-height: 21px;
                color: #ffffff;
                text-shadow: 0 1px 2px #999;
                padding-bottom: 20px;
            }
        </style>
    </head>
    <body>
        <div class="wrapper">
            <!-- 头部logo -->
            <img class="logo" src="https://pic4.zhimg.com/80/v2-a47051e92cf74930bedd7469978e6c08_hd.png">
            <!-- 表单部分 -->
            <div class="login">
                <div class="QRcode"><div class="mask"></div> </div>
                <div class="tab">
                    <div class="pwd">免密码登陆</div>
                    <div class="use-pwd">密码登录</div>
                </div>
                <div class="account">
                    <div class="countries">
                        <span class="plus">中国 +86</span>
                    </div>
                    <div class="choices">
                        <p class="fa fa-angle-up" style="position:absolute; top: 0;left: 0px"></p>
                        <p class="fa fa-angle-down" style="position:absolute; top: 7px;left: 0px"></p>
                    </div>
                    <span>|</span>
                    <input placeholder="手机号">
                </div>
                <div class="check-number">
                    <input placeholder="输入6位短信验证码" autocomplete="off">
                    <button>获取短信验证码</button>
                </div>
                <div class="check-option">
                    <button>接收语音验证码</button>
                </div>
                <button class="sub" type="submit">注册/登录</button>
                <div class="tip">
                    未注册手机验证后自动登录，注册即代表同意
                    <a href="https://www.zhihu.com/terms">《知乎协议》</a>
                    <a href="https://www.zhihu.com/term/privacy">《隐私保护指引》</a>
                </div>
            </div>
            <!--  社会登录 -->
            <div class="socialLogin">
                <span> 社交帐号登录</span>
                <span style="float: right;" class="space"><span class="fa fa-weibo" style="color: #ff7752;font-size: 18px">&nbsp;</span>微博</span>
                <span style="float: right;" class="space"><span class="fa fa-qq" style="color: #5cb4e1; font-size: 18px">&nbsp;</span>QQ</span>
                <span style="float: right;" class="space"><span class="fa fa-weixin" style="color: #00b500; font-size: 18px">&nbsp;</span>微信</span>
            </div>
            <!-- 其他部分 -->
            <div class="other">
                <a href="https://www.zhihu.com/org/signup" class="first">开通机构号</a>
                <span>|</span>
                <a class="second">下载知乎 App</a>
            </div>
            <!-- foot部分 -->
            <div class="foot"></div>
        </div>
    </body>
</html>